<template>
  <div style="width: 100%;height: 100vh;overflow:hidden;background-color: darkslateblue">
    <div style="width:400px;margin: 150px auto;">
      <div style="color: white;font-size: 30px;text-align: center;padding: 30px 0;">
        欢迎登录
      </div>
      <div>
        <el-form ref="form" :model="form" size="default" :rules="rules" >
          <el-form-item label="账号" prop="phone">
            <el-input v-model="form.phone" ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="form.password" show-password></el-input>
          </el-form-item>
          <el-form-item>
            <el-row class="mb-4" style="width: 400px;">
              <el-button  style="width: 100%" type="primary" @click="login">登 录</el-button>
            </el-row>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>

</template>

<script>

import axios from "@/util/request";

export default {
  data(){
    return{
      form:{},
      rules:{
        phone: [
          { required: true, message: '用户名为空或格式不正确', trigger: 'blur',pattern:/^[0-9a-zA-Z_]{6,11}$/ },
        ],
        password: [
          { required: true, message: '密码为空或格式不正确', trigger: 'blur',pattern:/^[0-9a-zA-Z_]{6,11}$/ },
        ],
      }
    }
  },
  methods:{
    login(){
      this.$refs['form'].validate((valid) => {
        if (valid) {
          axios.request.post(axios.useRoute+"/user/login",this.form).then(res=>{
            console.log(res.data.code)
            if (res.data.code === 200 ) {
              this.$message.success(res.data.msg)
              this.$store.commit('$_removeStorage');
              this.$store.commit('$_setToken', res.data.data.token);
              this.$router.push("/user")//登录成功跳转主页
            }
            else{
              this.$message.error(res.data.msg)
            }
          })
        }})
    }
  }
}
</script>

<style scoped>
.el-form-item >>> .el-form-item__label{
  color: white;
}
</style>
